<template>
    <div 
      class="customer-service" 
      :class="{ 'customer-service--expanded': isExpanded }"
      :style="{ 
        bottom: bottomPosition,
        right: rightPosition,
        left: leftPosition
      }"
    >
      <!-- 看板娘图标/头像 -->
      <div 
        class="cs-avatar"
        :style="{ 
          backgroundColor: avatarBgColor,
          width: avatarSize,
          height: avatarSize
        }"
        @click="toggleExpand"
      >
        <img 
          v-if="avatarImg" 
          :src="avatarImg" 
          :alt="serviceName" 
          class="cs-avatar-img"
        >
        <i 
          v-else 
          :class="avatarIcon" 
          :style="{ fontSize: avatarIconSize, color: avatarIconColor }"
        ></i>
        
        <!-- 未读消息提示 -->
        <span 
          v-if="unreadCount > 0" 
          class="cs-unread-badge"
          :style="{ backgroundColor: badgeColor }"
        >
          {{ unreadCount > 9 ? '9+' : unreadCount }}
        </span>
      </div>
      
      <!-- 客服窗口 -->
      <div class="cs-window" :style="{ width: windowWidth, height: windowHeight }">
        <!-- 窗口头部 -->
        <div 
          class="cs-window-header"
          :style="{ backgroundColor: headerBgColor, color: headerTextColor }"
        >
          <h3 class="cs-window-title">{{ serviceName }}</h3>
          <button 
            class="cs-close-btn" 
            @click="toggleExpand"
            :style="{ color: headerTextColor }"
          >
            <i class="el-icon-close"></i>
          </button>
        </div>
        
        <!-- 聊天内容区域 -->
        <div class="cs-chat-area">
          <!-- 欢迎消息 -->
          <div class="cs-message cs-message--system">
            <div class="cs-message-content">{{ welcomeMessage }}</div>
          </div>
          
          <!-- 消息列表 -->
          <div v-for="(msg, index) in messages" :key="index" class="cs-message" :class="`cs-message--${msg.sender}`">
            <div class="cs-message-avatar">
              <img v-if="msg.sender === 'user'" :src="userAvatar" alt="用户头像">
              <img v-else :src="avatarImg || defaultAvatar" alt="客服头像">
            </div>
            <div class="cs-message-content">{{ msg.content }}</div>
          </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="cs-input-area">
          <el-input 
            v-model="inputMessage" 
            placeholder="请输入消息..." 
            @keyup.enter.native="sendMessage"
            :style="{ borderColor: inputBorderColor }"
          ></el-input>
          <button 
            class="cs-send-btn" 
            @click="sendMessage"
            :style="{ backgroundColor: sendBtnColor, color: sendBtnTextColor }"
          >
            <i class="el-icon-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CustomerService',
    props: {
      // 服务名称
      serviceName: {
        type: String,
        default: '在线客服'
      },
      // 欢迎消息
      welcomeMessage: {
        type: String,
        default: '您好！请问有什么可以帮助您的吗？'
      },
      // 头像图片
      avatarImg: {
        type: String,
        default: ''
      },
      // 头像图标（当没有图片时使用）
      avatarIcon: {
        type: String,
        default: 'el-icon-headset'
      },
      // 头像背景色
      avatarBgColor: {
        type: String,
        default: '#409EFF'
      },
      // 头像大小
      avatarSize: {
        type: String,
        default: '60px'
      },
      // 头像图标颜色
      avatarIconColor: {
        type: String,
        default: '#ffffff'
      },
      // 头像图标大小
      avatarIconSize: {
        type: String,
        default: '30px'
      },
      // 未读消息数
      unreadCount: {
        type: Number,
        default: 0
      },
      // 未读消息徽章颜色
      badgeColor: {
        type: String,
        default: '#F56C6C'
      },
      // 窗口宽度
      windowWidth: {
        type: String,
        default: '320px'
      },
      // 窗口高度
      windowHeight: {
        type: String,
        default: '450px'
      },
      // 头部背景色
      headerBgColor: {
        type: String,
        default: '#409EFF'
      },
      // 头部文字颜色
      headerTextColor: {
        type: String,
        default: '#ffffff'
      },
      // 输入框边框颜色
      inputBorderColor: {
        type: String,
        default: '#DCDFE6'
      },
      // 发送按钮颜色
      sendBtnColor: {
        type: String,
        default: '#409EFF'
      },
      // 发送按钮文字颜色
      sendBtnTextColor: {
        type: String,
        default: '#ffffff'
      },
      // 用户头像
      userAvatar: {
        type: String,
        default: 'https://picsum.photos/id/64/40/40'
      },
      // 底部定位
      bottomPosition: {
        type: String,
        default: '20px'
      },
      // 右侧定位
      rightPosition: {
        type: String,
        default: '20px'
      },
      // 左侧定位（默认不设置，优先右侧）
      leftPosition: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 是否展开
        isExpanded: false,
        // 输入的消息
        inputMessage: '',
        // 消息列表
        messages: [],
        // 默认头像
        defaultAvatar: 'https://picsum.photos/id/237/40/40'
      }
    },
    methods: {
      // 切换展开/收起状态
      toggleExpand() {
        this.isExpanded = !this.isExpanded;
        // 如果展开且有未读消息，清空未读
        if (this.isExpanded && this.unreadCount > 0) {
          this.$emit('clearUnread');
        }
      },
      
      // 发送消息
      sendMessage() {
        if (!this.inputMessage.trim()) return;
        
        // 添加用户消息
        this.messages.push({
          sender: 'user',
          content: this.inputMessage.trim()
        });
        
        // 清空输入框
        this.inputMessage = '';
        
        // 模拟客服回复
        setTimeout(() => {
          this.messages.push({
            sender: 'service',
            content: '感谢您的留言，我们会尽快回复您！'
          });
          // 滚动到底部
          this.scrollToBottom();
        }, 1000);
        
        // 滚动到底部
        this.scrollToBottom();
        
        // 触发消息发送事件
        this.$emit('messageSent', this.messages[this.messages.length - 1]);
      },
      
      // 滚动到最新消息
      scrollToBottom() {
        this.$nextTick(() => {
          const chatArea = this.$el.querySelector('.cs-chat-area');
          if (chatArea) {
            chatArea.scrollTop = chatArea.scrollHeight;
          }
        });
      }
    },
    mounted() {
      // 初始滚动到底部
      this.scrollToBottom();
    }
  }
  </script>
  
  <style scoped>
  .customer-service {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    transition: all 0.3s ease;
  }
  
  /* 头像样式 */
  .cs-avatar {
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
  }
  
  .cs-avatar:hover {
    transform: scale(1.05);
  }
  
  .cs-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* 未读消息徽章 */
  .cs-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  /* 客服窗口 */
  .cs-window {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
  }
  
  /* 展开状态 */
  .customer-service--expanded {
    .cs-window {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* 窗口头部 */
  .cs-window-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
  }
  
  .cs-window-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
  }
  
  .cs-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 聊天区域 */
  .cs-chat-area {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* 消息样式 */
  .cs-message {
    display: flex;
    max-width: 85%;
  }
  
  .cs-message--system {
    align-self: center;
    margin: 8px 0;
  }
  
  .cs-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
  }
  
  .cs-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .cs-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cs-message-content {
    padding: 8px 12px;
    border-radius: 4px;
    margin: 0 8px;
    max-width: calc(100% - 44px);
  }
  
  .cs-message--system .cs-message-content {
    background-color: #e9e9eb;
    color: #666;
    font-size: 12px;
  }
  
  .cs-message--user .cs-message-content {
    background-color: #409EFF;
    color: white;
  }
  
  .cs-message--service .cs-message-content {
    background-color: white;
    color: #333;
    border: 1px solid #eee;
  }
  
  /* 输入区域 */
  .cs-input-area {
    padding: 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
  }
  
  .cs-input-area .el-input {
    flex: 1;
  }
  
  .cs-send-btn {
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
  }
  
  .cs-send-btn:hover {
    opacity: 0.9;
  }
  
  /* 适配左侧定位 */
  ::v-deep .customer-service:not([style*="left:"]) {
    flex-direction: row-reverse;
  }
  
  ::v-deep .customer-service[style*="left:"] {
    flex-direction: row;
  }
  
  ::v-deep .customer-service[style*="left:"] .cs-window {
    margin-right: 0;
    margin-left: 15px;
  }
  </style>
      